<template>
	<div>
		<div style="background: #fff;">
			<!-- 导航 -->
			<div class="navs rongqi1280">
				<div style="padding: 40px 0;display: flex;align-items: center;">
					<div class="ydl"><span>优秀案例分享平台</span></div>
					<div style="width: 1040px;" class="cdl">
						<div>
							<span @click="Go('/')">首页</span>
							<span @click="Go('/Liuyan')">留言</span>
							<span @click="Go('/Gywm')">关于我们</span>
							<span @click="ZWKF">课堂实践</span>
							<span @click="ZWKF">课后作业</span>
						</div>
						<div class="flex items_center">
							<div style="font-size: 24px;font-weight: bold;color: #333;">{{data.isUsername}}</div>
							<el-button style="width: 60px;height: 40px;color: #fff;margin-left: 30px;" color="#279c55" @click="tuichu">退出</el-button>
						</div>
					</div>
				</div>
			</div>
			<!-- 内容 -->
			<div class="mains">
				<!-- 轮播图 -->
				<div class="rongqi1280 banners" style='margin-bottom:40px'>
					<el-carousel :interval="5000" arrow="always">
						<el-carousel-item>
							<img style="width: 100%;height: 100%;" src="../assets/banner1.jpg" alt="轮播图">
						</el-carousel-item>
						<el-carousel-item>
							<img style="width: 100%;height: 100%;" src="../assets/banner2.jpg" alt="轮播图">
						</el-carousel-item>
						<el-carousel-item>
							<img style="width: 100%;height: 100%;" src="../assets/banner3.jpg" alt="轮播图">
						</el-carousel-item>
					</el-carousel>
				</div>
				<!-- 主体 -->
				<router-view></router-view>
				<div style="width: 100%;height: 100px;"></div>
				<!-- 底部 -->
				<div class="footers">
					<div class="rongqi1280" style="display: flex;position: relative;flex-direction: column;">
						<div class="foot_item">
							<span>优秀案例|</span>
							<span>课堂分享|</span>
							<span>在线留言</span>
						</div>
						<div class="foot_item">
							<span>2025@zjw版权所有</span>
						</div>
						<div class="foot_item">
							谢谢观看
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script setup>
	import {
		ElMessage,ElMessageBox
	} from 'element-plus'
	import {
		reactive,onMounted
	} from 'vue'
	import {
		useRouter
	} from 'vue-router'
	const router = useRouter()
	let data = reactive({
		wztitle: '优秀案例分享',
		isUsername: ''
	})
	onMounted(()=>{
		if(localStorage.getItem('USERNAME')){
			data.isUsername = localStorage.getItem('USERNAME')
		}
	})
	// 跳转
	let Go = (url)=>{
		router.push(url)
	}
	// 暂未开放
	let ZWKF = ()=>{
		ElMessage({
			type:'info',
			message:'暂未开放'
		})
	}
	// 退出
	let tuichu = ()=>{
		localStorage.removeItem('USERNAME')
		ElMessage({
			type:'success',
			message:'退出成功'
		})
		setTimeout(() => {
			router.push({
				path: '/Login'
			})
		}, 1500)
	}
</script>

<style scoped>
	.dingbu {
		width: 100%;
		background: #279c55;
		height: 300px;
	}

	.dingbu .headers {
		padding: 30px 0 15px 0;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	/deep/ .el-carousel__container {
		height: 300px;
	}

	.el-carousel__item {
		background-position: center;
		background-repeat: no-repeat;
		background-size: 100% 100%;
		/* color: #475669;
	    font-size: 18px;
	    opacity: 0.75;
	    line-height: 300px;
	    margin: 0; */
	}

	.el-carousel__item:nth-child(2n) {
		background-color: #99a9bf;
	}

	.el-carousel__item:nth-child(2n+1) {
		background-color: #d3dce6;
	}

	.mains {
		width: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		position: relative;
		/* margin-top: -200px; */
		/* background: #f1f1f1; */
	}

	.navs {
		display: flex;
		justify-content: center;
	}

	.qdl {
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 18px;
		color: #929292;
		transition: all 0.3s;
		cursor: pointer;
		margin-right: 40px;
	}

	.qdl:hover {
		color: #333;
		font-weight: bold;
	}

	.ydl {
		min-width: 200px;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 24px;
		color: #333;
		font-weight: bold;
		transition: all 0.3s;
		cursor: pointer;
		margin-right: 40px;
	}

	.ydl:hover {
		color: #279c55;
	}

	.active_ {
		background: #333;
		color: #fff;
	}

	.list_ {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: space-between;
		border-radius: 2px;
		background: #fff;
		min-height: 400px;
	}

	.footers {
		width: 100%;
		height: 200px;
		background: #333;
		color: #929292;
		font-size: 14px;
		text-align: center;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.foot_item {
		padding: 6px 0;
	}

	.navs .el-dropdown-menu__item,
	.el-menu-item {
		padding: 0 40px;
		margin-left: 20px;
	}
	.cdl{
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
	.cdl span{
		font-size: 16px;
		margin-left: 24px;
		cursor: pointer;
	}
	.cdl span:hover{
		color: #279c55;
	}
</style>
